<template>
	<view style="padding: 30upx;">
		
		<view class="row-start friendTable">
			<view style="margin-right: 25upx;">
				<view class="title"></view>
				<view class="left-title" >昨日</view>
				<view class="left-title" >总计</view>
			</view>
			<view style="min-width: 150rpx;">
				<view class="title">好友人数</view>
				<view class="number-text border-bottom">{{friendDetail.yesterdayStatistical.numberOfFriends}}</view>
				<view class="number-text">{{friendDetail.numberOfFriends}}</view>
			</view>
			<view style="min-width: 150rpx;">
				<view class="title">好友贡献值</view>
				<view class="number-text border-left-right border-bottom">{{friendDetail.yesterdayStatistical.buddyContribution}}</view>
				<view class="number-text border-left-right">{{friendDetail.buddyContribution}}</view>
			</view>
			<view style="min-width: 150rpx;">
				<view class="title">我的奖励</view>
				<view class="number-text border-bottom">{{friendDetail.yesterdayStatistical.myReward}}</view>
				<view class="number-text">{{friendDetail.myReward}}</view>
			</view>
		</view>
		
		<view class="friendDetails" v-if="goodFriendPageableList.length">
			<view class="row-start" style="margin-bottom: 31upx;">
				<view class="row-start headline-view">好友详情</view>
			</view>
			<view style="height: 2upx;background: #EEEEEE;"></view>
			<view style="padding: 31upx 31upx 0upx 31upx;">
				<view class="row-between friendDetails-title">
					<text>手机号/注册时间</text>
					<text>贡献值(昨日/总计)</text>
				</view>
				<navigator :url="`/pages/detail/friendsDetails/friendsDetails?detail=${JSON.stringify(item)}`" v-for="(item,index) in goodFriendPageableList" :key='item.phone + index' hover-class="none">
					<view class="row-between" :style="{'padding': '38upx 0upx','borderBottom': index == (goodFriendPageableList.length-1) ? 'none':'1upx solid #EEEEEE' }">
						<view class="column-start-start" >
							<view class="row-between" style="margin-bottom: 16upx;">
								<view class="phone">{{item.telephone}}</view>
								<view class="row-start authentication" :style="{marginLeft: '12upx','border': item.realNameFlag == 10 ? '1upx solid #FE5E49' : '1upx solid #ADADAD'}">
									<image :src="item.realNameFlag == 10 ? imge.shiming : imge.weishiming" style="width: 17upx;height: 18upx;margin-right: 7upx;"></image>
									<text :style="{'color': item.realNameFlag == 10 ? '#FE5E49' : '#999999'}">{{item.realNameFlag == 10 ? '已实名' : '未实名'}}</text>
								</view>
							</view>
							<view class="friendDetails-title" style="color: #666666;">{{item.registerTime}}</view>
						</view>
						<view class="row-start total">
							<text style="color: #FE5E49;">{{item.yesterdayStatistical.buddyContribution}}</text>
							<text>/</text>
							<text>{{item.buddyContribution}}</text>
							<uni-icons style="margin-left: 28upx; font-size: 20upx;" type="arrowright" color="#999999"/>
						</view>
					</view>
				</navigator>
			</view>	
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'downUrl', 'imgSite', 'url'])
		},
		data() {
			return {
				page: 1,
				imge:{
					shiming: '/static/assets/shiming.png',
					weishiming: '/static/assets/weishiming.png',
				},
				friendDetail:{
					numberOfFriends: 0,  buddyContribution: 0,  myReward: 0, 
					yesterdayStatistical: {
						numberOfFriends: 0, buddyContribution: 0,  myReward: 0, 
					}
				},
				goodFriendPageableList:[],
			}
		},
		onLoad() {
			this.getRequest()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.goodFriendPageableList= []
			this.getRequest();
		},
		onReachBottom() {
			if (!this.goodFriendPageableList.length) return;
			this.page += 1;
			this.getRequest();
		},
		methods: {
			timeFormat(time){
				let data = new Date(time - 0)
				let month = data.getMonth() + 1 > 10 ? data.getMonth() + 1 : `0${data.getMonth() + 1}`
				let day = data.getDate() > 10 ? data.getDate() : `0${data.getDate()}`
				let hours = data.getHours() > 10 ? data.getHours() : `0${data.getHours()}`
				let minutes = data.getMinutes() > 10 ? data.getMinutes() : `0${data.getMinutes()}`
				return `${data.getFullYear()}年${month}月${day}日 ${hours}:${minutes}`
			},
			getRequest () {
				this.$api.showLoading()
				return this.$api.globalUtil.requestAjax({
					url: '/CustomerApi/goodFriendList',
					method: 'POST',
					data: {
						pageNum: this.page,
						pageSize: 10,
					},
					success: (res) => {
						if (!res.data.success) return this.$api.msg(res.data.msg || '获取失败');
						let arr = res.data.response.goodFriendPageableList.results || [];
						if (!arr.length && this.page != 1) return this.$api.msg('没有更多了...');
						arr.forEach(item => {
							item.registerTime = this.timeFormat(item.registerTime)
							item.telephone =  item.telephone.substr(0, 3) + '****' + item.telephone.substr(7, 11);
						})
						this.friendDetail = res.data.response
						this.goodFriendPageableList = [...arr] 
					},
					complate: () => (uni.stopPullDownRefresh(),this.$api.hideLoading())
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.friendTable{
		background: linear-gradient(-30deg, #FF9300 0%, #FF7800 100%);
		border-radius: 10upx;
		padding: 25upx 15upx;
		position: relative;
		font-size: 24upx;
		font-weight: 500;
		font-family: PingFang SC;
		color: #FFFFFF;
		margin-bottom: 20upx;
		&::after{
			content: " ";
			background-image: url(/static/assets/pic.png);
			background-size: 100%;
			width: 130upx;
			height: 130upx;
			position: absolute;
			bottom: 0;
			right: 14upx;
		}
		.title{
			height: 32upx;
			margin-bottom: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.left-title{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			padding: 40upx;
		}
		.number-text{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40upx;
			height: 80upx;
			font-size: 40upx;
			font-weight: bold;
			/* border: 1upx solid #FFFFFF; */
		}
		.border-left-right{
			border-left: 1upx solid;
			border-right: 1upx solid;
			border-color: rgba(255,255,255,0.3);
		}
		.border-bottom{
			border-bottom: 1upx solid;
			border-color: rgba(255,255,255,0.3);
		}
	}
	.friendDetails{
		background: #FFFFFF;
		border-radius: 10upx;
		padding-top: 34upx;
		color: #333333;
		font-family: PingFang SC;
		.headline-view{
			font-size: 28upx;
			font-weight: bold;
			&::before{
				content: " ";
				width: 5upx;
				height: 24upx;
				background: linear-gradient(-30deg, #EC2400 0%, #FF7E00 100%);
				border-radius: 3upx;
				margin-right: 25upx;
			}
		}
		.friendDetails-title{
			font-size: 22upx;
			font-weight: 500;
			color: #999999;
		}
		.phone{
			font-size: 30upx;
			font-weight: bold;
		}
		.authentication{
			background: #FFFFFF;
			border-radius: 4upx;
			font-size: 20upx;
			font-weight: 500;
			padding: 6upx;
		}
		.total{
			font-size: 28upx;
			font-weight: bold;
		}
	}
</style>
